<template>
    <div>
        <el-dialog
            :visible.sync="dialogVisible"
            :width="width"
            :title="title"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            v-dialogDrag
            class="dialog-main"
            :modal='false'
            >
            <div>
                <el-form :model="ruleForm" :rules="rules" ref="formName" label-width="110px" class="demo-ruleForm" size="mini" slot="center">
                    <el-form-item label="名称:" prop="importName"> 
                        <el-input v-model="ruleForm.importName" size="mini" type="textarea" maxlength="50" rows="1" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="权限码:" prop="permissionCode"> 
                        <el-input v-model="ruleForm.permissionCode" size="mini" type="textarea" maxlength="50" rows="1" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="显示标题:" prop="title"> 
                        <el-input v-model="ruleForm.title" size="mini" type="textarea" maxlength="50" rows="1" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="模板类型:" prop="templateType"> 
                        <el-select v-model="ruleForm.templateType"
                            size='mini'
                            placeholder="选择消息类型"      
                            >
                            <el-option v-for="item in templateTypeList"
                                :key="item.label"
                                :label="item.name"
                                :value="item.label"
                                >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="模板元素:" prop="template1" v-if="ruleForm.templateType == 1">
                        <fileUpload 
                            :fileType='115' 
                            :dataParams="{ fileType:115}" 
                            accept='.xls,.xlsx,.xlsm,.xltx,.xltm'
                            :value='ruleForm.template1' 
                            :limit="1"
                            imageURl="/tool-api/common/uploadFile" 
                            :imgUrl="imgUrl" 
                            @upDateFile="upDateFile"
                        ></fileUpload> 
                    </el-form-item>
                   <el-form-item label="模板元素:" prop="template2" v-if="ruleForm.templateType == 2"> 
                        <el-input v-model="ruleForm.template2" size="mini"></el-input>
                    </el-form-item>
                     <el-form-item label="状态:" prop="status"> 
                         <el-switch
                            v-model="ruleForm.status"
                            :active-value="1"
                            :inactive-value="0"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="描述:" prop="description"> 
                       <template>
                            <div style="border: 1px solid #ccc;">
                                <Toolbar
                                    style="border-bottom: 1px solid #ccc"
                                    :editor="editor"
                                    :defaultConfig="toolbarConfig"
                                    :mode="mode"
                                />
                                <Editor
                                    style="height: 100px; overflow-y: hidden;"
                                    v-model="ruleForm.description"
                                    :defaultConfig="editorConfig"
                                    :mode="mode"
                                    @onCreated="onCreated"
                                />
                            </div>
                        </template>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="successDing('formName')" size="mini" type="primary">确 定</el-button>
                <el-button @click="closeCommonDialog()" size="mini">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { saveImportEvent,getImportEventById,getFilePath } from '@/api/user.js'
import { judgePorduction } from '@/utils/tools.js'
export default {
    components:{
        Editor, Toolbar, fileUpload:() => import('@/components/common/commonUploadFile'),
    },
    data(){
        return {
            imgUrl:'',
            templateEditor:false,
            editor: null,
            html: '<p>hello</p>',
            toolbarConfig: { },
            editorConfig: { placeholder: '请输入内容...',maxLength:500 },
            mode: 'simple', // or 'simple'

            dialogVisible: false,
            disableEdit: false,
            title: '导入配置',
            ruleForm:{
                template1:[],
            },
            chatIdsList:[],
            employeeIdsList:[],
            rules:{
                importName: [
                    { required: true, message: this.M2('请填写名称！'), trigger: 'blur' },
                ],
                templateType: [
                    { required: true, message: this.M2('请选择模板类型！'), trigger: 'blur' },
                ],
                template2: [
                    { required: true, message: this.M2('请填写模板元素！'), trigger: 'blur' },
                ],
                template1: [
                    { required: true, message: this.M2('请上传模板文件！'), trigger: 'blur' },
                ],
            },
            templateTypeList:[
                {
                    name:'无模板',
                    label:0,
                },
                {
                    name:'文件模板',
                    label:1,
                },
                {
                    name:'报表导出',
                    label:2,
                },
            ],
        }
    },
    props:{
        titleText:{
            type:String,
            default:() => ('')
        },
        width:{
            type:String,
            default:() => ('770px')
        },
    },
    mounted(){
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    },
    methods:{
        upDateFile(list){
            this.$set(this.ruleForm,'template1',list)
        },
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        successDing(formName){
            if(this.editor.getText() && this.editor.getText().replaceAll('\n','').length > 500){
               this.$message({
                    showClose: true,
                    message:'描述内容过长，请修改后在保存',
                    offset:220,
                    duration: 2000,
                    type: 'error'
                })
                return
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let param = {
                        importId:this.ruleForm.importId,
                        importName:this.ruleForm.importName,
                        permissionCode:this.ruleForm.permissionCode,
                        title:this.ruleForm.title,
                        description:this.ruleForm.description,
                        templateType:this.ruleForm.templateType,
                        template:this.ruleForm.templateType == 1 ? this.ruleForm.template1[0].fileUri : this.ruleForm.templateType == 2 ?  this.ruleForm.template2: null ,
                        status:this.ruleForm.status,
                    }
                    saveImportEvent(param).then(res => {
                        if(res.code == 200){
                            this.$message({
                                showClose: true,
                                message:'操作成功！',
                                offset:220,
                                duration: 2000,
                                type: 'success'
                            })
                            this.closeCommonDialog()
                            this.$emit('mainListList')
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        init(){
            let url = judgePorduction() ? 'http://productdev.yaheecloud.com/tool-api/common/getFilePath' : 'http://api-tools-test.yahee.com.cn:82/tool-api/common/getFilePath'
            getFilePath(url).then(res1 => {
                this.imgUrl = res1.data
            })
        },
        async openCommonDialog(row){
            await this.init()
            if(row){
                this.title = `编辑上传配置`
                let param = {
                    importId:row.importId
                }
                getImportEventById(param).then(res => {
                    if(res.data){
                        this.ruleForm = {
                            importName:res.data.importName,
                            permissionCode:res.data.permissionCode,
                            title:res.data.title,
                            description:res.data.description,
                            templateType:res.data.templateType,
                            template:res.data.template,
                            status:res.data.status ? res.data.status : 0,
                            importId:res.data.importId
                        }
                        if(res.data.templateType == 1){
                            this.$set(this.ruleForm,'template1',[{
                                name: res.data.template,
                                fileUri: res.data.template,
                                url:this.imgUrl + '/' + res.data.template
                            }])
                        }else if(res.data.templateType == 2){
                             this.$set(this.ruleForm,'template2',res.data.template)
                        } 
                    }
                })
            }else {
                this.title = '新建消息来源配置'
                this.$set(this.ruleForm,'importName',null)
                this.$set(this.ruleForm,'importId',null)
                this.$set(this.ruleForm,'permissionCode',null)
                this.$set(this.ruleForm,'title',null)
                this.$set(this.ruleForm,'templateType',null)
                this.$set(this.ruleForm,'template',null)
                this.$set(this.ruleForm,'template1',[])
                this.$set(this.ruleForm,'template2',null)
                this.$set(this.ruleForm,'status',1)
                this.$set(this.ruleForm,'description','')
            }
            this.dialogVisible = true
        },
        closeCommonDialog(){
            this.$refs.formName.clearValidate()
            this.dialogVisible = false
        }
    }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped lang="scss">
::v-deep.dialog-main{
    .el-dialog__header{
        border-bottom: 1px solid #ccc;
        padding: 10px !important;
        .el-dialog__title{
            font-weight: bold;
        }
    }
    .el-dialog__body{
        padding: 10px 20px 10px !important;
        overflow-y: auto;
        .button-new-tag {
            padding: 4px 10px;
        }
    }
    
}
</style>